import React, { Component } from 'react';
import { Form } from 'antd';
import './index.less';
class FormItem extends Component {
  constructor() {
    super();
  }

  getComponent(component) {
    if (!component.type || !component.type.name) {
      return component;
    }
    switch (component.type.name) {
      case 'Select':
      case 'TreeSelect':
        return React.cloneElement(component, {
          getPopupContainer: () => (this.props.modelId ? document.getElementById(this.props.modelId) : document.body),
          placeholder: this.props.isCompare ? '' : component.props.placeholder || '',
        });
      case 'DatePicker':
      case 'TimePicker':
        return React.cloneElement(component, {
          getCalendarContainer: () =>
            this.props.modelId ? document.getElementById(this.props.modelId) : document.body,
          placeholder: this.props.isCompare ? '' : component.props.placeholder || '',
        });

      default:
        if (this.props.isCompare) {
          return React.cloneElement(component, {
            placeholder: '',
          });
        } else {
          return component;
        }
    }
  }
  render() {
    const { form, item, colNum } = this.props;
    const { getFieldDecorator } = form;
    const { name, label, options, component, children, after } = item;
    const formItemLayout =
      colNum >= 1 && label
        ? {
            labelCol: {
              span: item.labelCol || 6,
            },
            wrapperCol: {
              span: item.wrapperCol || 18,
            },
          }
        : {};
    const attr = {
      ...formItemLayout,
      className: '',
      ...label,
    };

    return (
      <Form.Item {...attr}>
        {/* {text ? text : getFieldDecorator(name, { ...options })(component)} */}
        {getFieldDecorator(name, { ...options })(this.getComponent(component))}
        {children &&
          children.map((item) => {
            const { name, options, component } = item;
            return (
              <span className='mar-l-10' key={name}>
                {getFieldDecorator(name, { ...options })(this.getComponent(component))}
              </span>
            );
          })}
        {after && <span className='mar-l-10'>{after}</span>}
      </Form.Item>
    );
  }
}
export default FormItem;
